<template>
	<view class="container">
		<view class="search-bar">
			<uni-search-bar v-model="searchValue" placeholder="搜索医院/科室/医生" @confirm="search"></uni-search-bar>
		</view>

		<view class="category-tabs">
			<scroll-view scroll-x="true" class="scroll-x">
				<view class="tab-item" :class="{ active: currentTab === index }" v-for="(item, index) in categoryList"
					:key="index" @click="switchTab(index)">{{ item.name }}</view>
			</scroll-view>
		</view>

		<view class="hospital-list">
			<view class="hospital-item" v-for="hospital in filteredHosList" :key="hospital.id"
				@click="goToHospitalDetail(hospital.id)">
				<image class="hospital-img" :src="hospital.imgUrl" mode="aspectFill"></image>
				<view class="hospital-info">
					<view class="hospital-name">{{ hospital.name }}</view>
					<view class="hospital-grade">{{ hospital.grade }}</view>
					<view class="hospital-address">
						<text class="iconfont icon-location"></text>
						<text>{{ hospital.address }}</text>
					</view>
					<view class="hospital-tags">
						<text class="tag" v-for="tag in hospital.tags" :key="tag">{{ tag }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HOSPITAL_LIST
	} from '@/config.js'
	export default {
		data() {
			return {
				searchValue: '',
				currentTab: 0,
				currentNav: 0,
				categoryId: 1,
				categoryList: [{
						id: 1,
						name: '综合医院'
					},
					{
						id: 2,
						name: '专科医院'
					},
					{
						id: 3,
						name: '中医医院'
					},
					{
						id: 4,
						name: '妇幼保健院'
					},
					{
						id: 5,
						name: '口腔医院'
					},
					{
						id: 6,
						name: '眼科医院'
					},
					{
						id: 7,
						name: '精神心理科'
					},
					{
						id: 8,
						name: '康复医院'
					}
				],
				hospitalList: HOSPITAL_LIST
			}
		},
		computed: {
			filteredHosList() {
				if (this.categoryId === 1) return this.hospitalList
				return this.hospitalList.filter(hos => hos.categoryId === this.categoryId);
			}
		},
		methods: {
			search() {
				console.log('搜索内容：', this.searchValue);
				// 这里可以添加搜索逻辑
			},
			switchTab(index) {
				this.currentTab = index;
				const category = this.categoryList[index]
				this.categoryId = category.id
			},
			switchNav(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/myAppointments/myAppointments'
					})
					return
				}
			},
			goToHospitalDetail(id) {
				uni.navigateTo({
					url: `/pages/hospitalDetail/hospitalDetail?id=${id}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	uni-app,
	uni-page,
	uni-page-wrapper,
	uni-page-body {
		height: 100%;
	}

	.container {
		height: 100%;
		background-color: #f5f5f5;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;
	}

	.search-bar {
		background-color: #fff;
		margin-bottom: 30rpx;
	}

	::v-deep .uni-scroll-view {
		.uni-scroll-view {
			padding: 30rpx 0;
		}
	}

	.category-tabs {
		background-color: #fff;
	}

	.scroll-x {
		white-space: nowrap;
	}

	.tab-item {
		display: inline-block;
		padding: 16rpx 30rpx;
		margin: 0 10rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		background-color: #f5f5f5;
	}

	.tab-item.active {
		background-color: #1677ff;
		color: #fff;
	}

	.hospital-list {
		padding: 20rpx;
	}

	.hospital-item {
		display: flex;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		align-items: center;
		padding-left: 20rpx;
	}

	.hospital-img {
		width: 240rpx;
		height: 180rpx;
		border-radius: 16rpx 0 0 16rpx;
	}

	.hospital-info {
		flex: 1;
		padding: 20rpx;
	}

	.hospital-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.hospital-grade {
		font-size: 24rpx;
		color: #1677ff;
		margin-bottom: 10rpx;
	}

	.hospital-address {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.hospital-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		font-size: 20rpx;
		color: #1677ff;
		background-color: #e6f4ff;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
		margin-right: 10rpx;
		margin-bottom: 6rpx;
	}

	.footer-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		padding: 10rpx 0;
	}

	.nav-item {
		flex: 1;
		text-align: center;
		color: #666;
	}

	.nav-item.active {
		color: #1677ff;
	}

	.nav-text {
		display: block;
		font-size: 24rpx;
		margin-top: 4rpx;
	}
</style>